<template>
    <div>
        <router-link tag='div' to='/' class="header-abs" v-show='showAbs'>
            <span class="iconfont">&#xe61e;</span>
        </router-link>
        <div class="header-fixed" v-show='!showAbs' :style="showHeader">
            <router-link to='/'>
                <span class="iconfont cityheaderback">&#xe61e;</span>
            </router-link>
            景点详情
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            showAbs: true,
            showHeader: {
                opacity: 0
            }
        }
    },
    methods:{
        getScrollTop(){
                console.log('gg')
                let top = document.documentElement.scrollTop;
                if(top > 60){
                    let opacity = top / 140;
                    opacity > 1? 1 : opacity;
                    this.showAbs = false;
                    this.showHeader = { opacity };
                }else{
                    this.showAbs = true
                }       
        }
    },
    activated(){
       window.addEventListener('scroll', this.getScrollTop)
    },
    deactivated(){//当页面即将被隐藏执行的勾子函数
        window.removeEventListener('scroll', this.getScrollTop)
    }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/style/varibles.styl';
    .header-abs
        width .8rem
        height .8rem 
        position absolute 
        left .2rem
        top .2rem
        background rgba(0, 0, 0, .6)
        border-radius 50%
        line-height .8rem
        text-align center
        color #fff
    .header-fixed {
        position:fixed;
        top:0;
        color: #fff;
        width:100%;
        background: $bgColor;
        height: 0.86rem;
        line-height: 0.86rem;
        text-align: center;
        .cityheaderback{
            position:absolute;
            left:.1rem
            color:#fff
        }
        }
</style>
